<template>
  <div class="box">
    <div>
      <img :src="img[0]" alt="" />
    </div>

    <div>
      <h3>常用</h3>
    </div>

    <div>
      <div>
        <img :src="img[1]" alt="" />
        <p>电子社保卡</p>
      </div>
      <div>
        <img :src="img[2]" alt="" />
        <p>非税电子化</p>
      </div>
      <div>
        <img :src="img[3]" alt="" />
        <p>个人信用报告</p>
      </div>
    </div>

    <div>
      <h3>办事大厅</h3>
    </div>

    <div>
      <div>
        <div><img :src="img[4]" alt="" /></div>
        <div>
          <p>养老金</p>
          <p>退休金、退休费</p>
        </div>
      </div>
      <div>
        <div><img :src="img[5]" alt="" /></div>
        <div>
          <p>电子社保卡</p>
          <p>社保卡的有效电子凭证</p>
        </div>
      </div>
      <div>
        <div><img :src="img[6]" alt="" /></div>
        <div>
          <p>秦务员</p>
          <p>陕西政务服务</p>
        </div>
      </div>
      <div>
        <div><img :src="img[7]" alt="" /></div>
        <div>
          <p>住房公积金</p>
          <p>信息查询、业务办理</p>
        </div>
      </div>
      <div>
        <div><img :src="img[8]" alt="" /></div>
        <div>
          <p>境外退税</p>
          <p>退税信息查询</p>
        </div>
      </div>
      <div>
        <div><img :src="img[9]" alt="" /></div>
        <div>
          <p>非税电子化</p>
          <p>非税收收入的电子化...</p>
        </div>
      </div>
      <div>
        <div><img :src="img[10]" alt="" /></div>
        <div>
          <p>个人信用报告</p>
          <p>查询个人信用报告</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      img: [
        "./img/life/zhengwu/zwbjt.png",
        "./img/life/zhengwu/zwzj.png",
        "./img/life/zhengwu/zwzj-05.png",
        "./img/life/zhengwu/zwzj-07.png",
        "./img/life/zhengwu/bsdt.png",
        "./img/life/zhengwu/bsdt-05.png",
        "./img/life/zhengwu/bsdt-09.png",
        "./img/life/zhengwu/bsdt-10.png",
        "./img/life/zhengwu/bsdt-13.png",
        "./img/life/zhengwu/bsdt-14.png",
        "./img/life/zhengwu/bsdt-15.png",
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  > div:nth-child(1) {
    > img {
      width: 100%;
    }
  }
  > div:nth-child(2),
  > div:nth-child(4) {
    width: 100%;
    margin: 0.1rem 0rem;
    text-indent: 1em;
    > h3 {
      font-size: 0.2rem;
      font-weight: 800;
    }
  }
  > div:nth-child(3) {
    width: 100%;
    display: flex;
    justify-content: space-between;
    text-align: center;
    box-sizing: border-box;
    padding: 0rem 1em;
    margin: 0.1rem 0rem;
    > div > img {
      width: 0.55rem;
    }
  }
  > div:nth-child(5) {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    > div {
      width: 50%;
      display: flex;
      justify-content: left;
      text-indent: 1em;
      margin: 0.1rem 0;
      > div {
        > img {
          width: 0.35rem;
        }
        > p:nth-child(1) {
          font-size: 0.14rem;
        }
        > p:nth-child(2) {
          font-size: 0.12rem;
        }
      }
    }
  }
}
</style>